<template>
  <el-descriptions title="" :column="2" border>
    <el-descriptions-item>
      <template #label> 用户ID </template>
      {{ data._id }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label> 用户名 </template>
      {{ data.username }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label> 账户余额 </template>
      {{ data.money }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label> 账户状态 </template>
      {{ data.state ? '正常' : '异常' }}
    </el-descriptions-item>
    <el-descriptions-item :span="2">
      <template #label> 地址 </template>
      {{ data.address }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label> 日期 </template>
      {{ formattedDate }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label> 头像 </template>
      <img :src="GETIMAGE+data.avatar" style="width: 120px" alt="" />
    </el-descriptions-item>
  </el-descriptions>
</template>

<script lang="ts" setup>import {GETIMAGE} from '../client';
import { computed } from 'vue';

const props = defineProps<{ data: any }>();

// 定义一个计算属性来格式化日期
const formattedDate = computed(() => {
  const date = new Date(props.data.createTime);
  return `${date.getFullYear()}年${(date.getMonth() + 1).toString().padStart(2, '0')}月${date.getDate().toString().padStart(2, '0')}日`;
});
</script>